<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- <div>这个家伙很懒 什么都没有留下</div> -->
    <!-- 双击一下 文字 变成输入框 立即输入 保存 取消 按钮
    1、 事件
    2、状态的改变   DOM
    3、本地存储
    4、将这些整合起来 面向对象来封装处理 -->
    <div id="profile"></div>
    <script>
        // 在线编辑 类
        // 封装他内部的实现细节
        function EditInPlace(id, parent, value) {
            this.id = id;
            this.value = value || 'default value';
            this.parentElement = document.getElementById(parent);
            this.createElements();   //把节点显示到界面上
            this.attachEvents(); 
        }
        EditInPlace.prototype.attachEvents = function() {
            // var that = this;     第一种方法在外面定义一个that=this
            this.cancelButton.addEventListener('click', ()=> {      //第二种方法用箭头函数
                this.converToText();
            })

            this.saveButton.addEventListener('click', () => {
                var text = this.fieldElement.value;
                this.value = text;
                // 本地存储
                window.localStorage.setItem('profile',text);
                this.staticElement.innerHTML = text;
                this.converToText();

            })

            this.staticElement.addEventListener('click', () => {     //第二种方法改成箭头函数
                // console.log('变身');
                this.converToEdit();
            },false);
        }
        EditInPlace.prototype.converToText = function() {
            this.staticElement.style.display = 'inline';
            this.fieldElement.style.display = 'none';
            this.saveButton.style.display = 'none';
            this.cancelButton.style.display = 'none';
        }
        EditInPlace.prototype.converToEdit = function() {
            this.staticElement.style.display = 'none';
            this.fieldElement.style.display = 'inline';
            this.saveButton.style.display = 'inline';
            this.cancelButton.style.display = 'inline';
        }
        EditInPlace.prototype.createElements = function() {
            console.log('显示文本');
            this.containerElement = document.createElement('div');

            this.staticElement = document.createElement('span');
            this.staticElement.innerText = this.value;
            this.parentElement.appendChild(this.staticElement);

            this.fieldElement = document.createElement('input');
            this.fieldElement.type = 'text';
            this.fieldElement.value = this.value;
            this.fieldElement.style.display = 'none';
            this.containerElement.appendChild(this.fieldElement);

            this.saveButton = document.createElement('input');
            this.saveButton.type = 'button';
            this.saveButton.value = 'save';
            this.saveButton.style.display = 'none';
            this.containerElement.appendChild(this.saveButton);
            this.parentElement.appendChild(this.containerElement);
            
            this.cancelButton = document.createElement('input');
            this.cancelButton.type = 'button';
            this.cancelButton.value = 'cancel';
            this.cancelButton.style.display = 'none';
            this.containerElement.appendChild(this.cancelButton);
            this.parentElement.appendChild(this.containerElement);
            
        }
       
        // 设计模式
        // function EditInPlace(id, parent, value) {}
        // EditInPlace.prototype = {
        //     createElement() {},  //创建节点
        //     attachEvents() {},   //管理所有的事件
        //     converToText() {},
        //     converToEdit() {},
        //     save() {},
        //     setValue(val) {
        //         this.value = value;
        //         this.staticElement.innerText = value;
        //         localStorage.setItem('profile',value);
        //     },
        //     cancel() {},
        // }
        window.onload = function() {
            var profile = localStorage.getItem('profile');
            var prolifeEditor = new EditInPlace('titleClassical','profile',profile);
        }
    </script>
</body>
</html>